<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 分栏组件 -->
        <el-tabs>
          <!-- 表格栏 -->
          <el-tab-pane label="表格">
            <!-- 表格操作 -->
            <el-row>
              <page-tools :show-before="true">
                <span slot="before">共{{ list.length }}条记录</span>
                <template slot="after">
                  <el-button size="small" type="warning" @click="updatefile=true">导入</el-button>
                  <el-button size="small" type="danger" @click="exportData">导出</el-button>
                  <el-button type="primany" @click="showAddDialog=true">添加成员</el-button>
                </template>
              </page-tools>
            </el-row>
            <el-row>
              <!-- 表格组件 -->
              <el-table :data="list">
                <el-table-column label="序号" prop="id" />
                <el-table-column label="头像">
                  <template slot-scope="scope">
                    <img :src="scope.row.avatar" style="width:50%;height:50%">
                  </template>
                </el-table-column>
                <el-table-column label="姓名" prop="name" />
                <el-table-column label="手机号" prop="mobile" />
                <el-table-column label="操作">
                  <template slot-scope="{ row }">
                    <el-button size="small" type="text" @click="permFn()">分配权限</el-button>
                    <el-button size="small" type="text" @click="delFn(row.id)">删除成员</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <!-- 分页组件 -->
            <el-row type="flex" justify="center" align="middle">
              <el-pagination
                :current-page="page.page"
                :page-size="page.pagesize"
                :total="page.total"
                layout="prev, pager, next"
                @current-change="changePage"
              />
            </el-row>
          </el-tab-pane>
          <!-- 组件栏 -->
          <el-tab-pane label="组件">
            <NavBar
              :show-confirm="true"
              :show-back="true"
              :icon-confirm="'el-icon-info'"
              :icon-back="'el-icon-info'"
              :title="'哈哈哈'"
            >
              <template v-slot:title />
            </NavBar>
          </el-tab-pane>
          <!-- 权限管理 -->
          <el-tab-pane label="权限管理">
            <!-- 表格 -->
            <el-table :data="permListData" border="" row-key="id">
              <el-table-column label="名称" prop="name" />
              <el-table-column label="标识" prop="code" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <!-- > 当type为1时为访问权限，type为2时为功能权限
            > 和前面内容一样，我们需要完成 新增权限 / 删除权限 / 编辑权限 -->
                  <el-button v-if="row.type===1" type="text" @click="addPermission(row.id,row.type)">添加</el-button>
                  <el-button v-if="checkPermission('edit')" type="text" @click="editPermission(row.id)">编辑</el-button>
                  <el-button v-if="checkPermission('del')" type="text" @click="delPermission(row.id)"> 删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 日历 -->
          <el-tab-pane label="日历">
            <work-calendar />
          </el-tab-pane>
          <!-- 数据转换 -->
          <el-tab-pane label="数据转换">
            <el-table :data="datalist" style="width: 100%">
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="work"
                label="work"
                width="180"
              />
              <el-table-column
                prop="date"
                label="date"
              />
              <el-table-column
                prop="jijixing"
                label="jijixing"
              />
              <el-table-column
                prop="help995"
                label="help995"
              />
              <el-table-column
                prop="study"
                label="study"
              />
              <el-table-column
                prop="truelv"
                label="truelv"
              />
            </el-table>
            <el-button type="primary" @click="transFn">转换</el-button>
            <el-card v-for="(item,index) in translist" :key="index" class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
              </div>
              <div v-for="(k,i) in item.value" :key="i" class="text item">
                {{ k }}
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 新增成员弹出框 -->
    <el-dialog :visible="showAddDialog" @close="btnCancel">
      <el-form ref="form" :model="formData" :rules="formRules">
        <el-form-item prop="id" label="序号">
          <el-input v-model="formData.id" placeholder="请输入序号" />
        </el-form-item>
        <el-form-item label="头像">
          <!-- 上传图片 -->
          <el-upload
            :on-preview="preview"
            :on-remove="handleRemove"
            :on-change="changeFile"
            :before-upload="beforeUpload"
            :file-list="fileList"
            :http-request="upload"
            list-type="picture-card"
            action="#"
            :limit="1"
            :class="{disabled: fileComputed }"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <!-- 加载进度条 -->
          <el-progress v-if="showPercent" style="width: 180px" :percentage="percent" />
          <!-- 预览弹层 -->
          <el-dialog title="图片" :visible.sync="showDialog">
            <img :src="imgUrl" style="width:100%" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item prop="mobile" label="手机号">
          <el-input v-model="formData.mobile" placeholder="请输入手机号" />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button type="primary" size="small" @click="btnOk">确定</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
    <!-- 导入文件 -->
    <!-- 公共导入组件 -->
    <upload-excel v-if="updatefile" :on-success="success" />
    <!-- 放置一个弹层 -->
    <el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel">
      <!-- 权限是一颗树 -->
      <!-- 将数据绑定到组件上 -->
      <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
      <!-- id作为唯一标识 -->
      <el-tree
        ref="permTree"
        :data="permData"
        :props="defaultProps"
        :show-checkbox="true"
        :check-strictly="true"
        :default-expand-all="true"
        :default-checked-keys="selectCheck"
        node-key="id"
      />
      <!-- 确定 取消 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 放置添加权限弹层 -->
    <el-dialog :visible="PermDialog" :title="showText" @close="btnPermBack">
      <el-form ref="permForm" :model="permForm" :rules="perFormRules" label-width="120px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="permForm.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="permForm.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="permForm.description" style="width:90%" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnPermSubmit">确定</el-button>
          <el-button size="small" @clcik="btnPermBack">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import WorkCalendar from '../dashboard/components/work-calendar.vue.vue'
// 引入mixin模块
// import checkPermission from '@/mixin/checkPermission'
// 引入腾讯云cos包
import COS from 'cos-js-sdk-v5'
// COS实例化
var cos = new COS({
  SecretId: 'AKIDxiDRO4TcU5PSEiwub1A2dx0nJYWCcl8I', // 身份识别 ID
  SecretKey: 'wc191cvxiDRO4UdV6RajbCXbOuA9rISM' // 身份密钥
})
// 引入手机号校验
import { validMobile } from '@/utils/validate'
// 转树形
import { transListToTreeData } from '@/utils'
export default {
  components: {
    WorkCalendar
  },
  // mixins: {
  //   checkPermission
  // },
  data() {
    const valmobile = (rule, value, callback) => {
      validMobile(value) ? callback() : callback(new Error('手机号格式不正确'))
    }
    return {
      datalist: [
        { name: '张三', work: 80, date: 60, jijixing: 80, help995: 77, study: 66, truelv: 55 },
        { name: '李四', work: 80, date: 60, jijixing: 80, help995: 77, study: 66, truelv: 55 }
      ],
      translist: [{ name: '', value: '' }],
      // 权限数组列表
      permlist: [
        // pid '0' 一级  二级的pid跟一级的id一致
        //  type 1可添加 type 2 不可添加可访问
        // enVisible代表勾选否 0勾选 1未勾选
        { code: 'vip',
          description: '会员',
          id: 'vip',
          name: 'vip',
          pid: '0',
          type: 1 },
        { code: 'svip',
          description: '超级会员',
          id: 'svip',
          name: 'svip',
          pid: 'vip',
          type: 2 },
        { code: 'redvip',
          description: '红钻会员',
          id: 'redvip',
          name: 'redvip',
          pid: 'vip',
          type: 2 },
        { code: 'bluevip',
          description: '蓝钻会员',
          id: 'bluevip',
          name: 'bluevip',
          pid: 'vip',
          type: 2 },
        { code: 'aa',
          description: 'aa',
          id: 'aa',
          name: 'aa',
          pid: '0',
          type: 1 },
        { code: 'aaa',
          description: 'aaa',
          id: 'aaa',
          name: 'aaa',
          pid: 'aa',
          type: 2 }
      ],
      // 树形展示的配置
      defaultProps: {
        label: 'name'
      },
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      showPermDialog: false, // 分配权限弹层
      permListData: [], // 权限管理的权限list created阶段就要变成树形
      showPercent: false, // 进度条展示隐藏
      percent: 0, // 进度条百分比
      fileList: [], // 图片地址设置为数组
      showDialog: false, // 控制显示预览图片弹层
      imgUrl: '', // 预览图片地址
      currentFileUid: '',
      updatefile: false,
      showAddDialog: false, // 添加成员的显示隐藏
      // 添加权限表单数据
      permForm: {
        code: '',
        description: '',
        id: '',
        name: '',
        pid: '',
        type: ''
      },
      // 添加权限表单校验规则
      perFormRules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      },
      PermDialog: false, // 新增编辑权限弹层
      permListDataId: '', // 记录当前id
      permListDataType: '', // 记录当前type
      // 添加成员表单数据
      formData: {
        id: '',
        name: '',
        mobile: ''
      },
      // 添加成员表单校验规则
      formRules: {
        id: [{ required: true, trigger: 'blur', message: '学号不能为空' }],
        name: [{ required: true, trigger: 'blur', message: '姓名不能为空' }],
        mobile: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { trigger: 'blur', validator: valmobile }]
      },
      // 成员列表
      list: [
        {
          id: '0',
          avatar: 'https://pic4.zhimg.com/v2-e11c2220bc3fcb328ce604c1441e8e5a_1440w.jpg?source=172ae18b',
          name: '潘璞老师0 ',
          mobile: '12111111111'
        },
        {
          id: '1',
          avatar: 'https://pic4.zhimg.com/v2-e11c2220bc3fcb328ce604c1441e8e5a_1440w.jpg?source=172ae18b',
          name: '潘璞老师1',
          mobile: '13111111111'
        },
        {
          id: '2',
          avatar: 'https://pic4.zhimg.com/v2-e11c2220bc3fcb328ce604c1441e8e5a_1440w.jpg?source=172ae18b',
          name: '潘璞老师2',
          mobile: '14111111111'
        }
      ],
      page: {
        page: 1,
        pagesize: 3,
        total: 3
      }
    }
  },
  computed: {
    //   如果为true证明上传过图片 上传图片不要显示
    fileComputed() {
      return this.fileList.length === 1
    },
    // 新增编辑弹层的表头文字
    showText() {
      return this.permForm.id ? '编辑权限' : '新增权限'
    }
  },
  created() {
    this.permListData = transListToTreeData(this.permlist, '0')
  },
  methods: {
    changePage(newpage) {
      this.page.page = newpage
    },
    // 点击确定
    async btnOk() {
      try {
        await this.$refs.form.validate()
        this.list.push({ ...this.formData, avatar: this.fileList[0].url })
        this.showAddDialog = false
        // 这个动作会触发el-form的close绑定的btnCancel事件所以无需清空操作
      } catch (error) {
        // 校验没通过处理
        console.log(error)
      }
    },
    // 点击取消
    btnCancel() {
      // 1.重置数据
      this.formData = {
        id: '',
        name: '',
        mobile: ''
      }
      this.fileList = []
      // 2.清空校验
      this.$refs.form.resetFields()
      // 3.关闭弹窗
      this.showAddDialog = false
    },
    // 删除功能
    delFn(id) {
      this.$confirm('您确定要删除吗？').then(() => {
        this.list.splice(this.list.findIndex(item => {
          return item.id === id
        }), 1)
      })
    },
    // 导入
    success({ results }) {
      // 中英文key映射关系
      const userRelations = {
        '序号': 'id',
        '姓名': 'name',
        '手机号': 'mobile'
      }
      // map遍历数组
      // 对原来item进行处理 并返回处理后的值
      // arr作为接收处理后的对象
      var arr = results.map(item => {
        // 需要将每一个条数据item里面的中文都换成英文
        const userInfo = {}
        // 拿出所有中文key放在一个数组中
        Object.keys(item).forEach(key => {
          userInfo[userRelations[key]] = item[key]
        })
        // 最终userInfo变成了全是英文
        return userInfo
      })
      this.list.splice(this.list.length, 0, ...arr)
      // 隐藏上传文件
      this.updatefile = false
    },
    // 导出数据转化为excel
    exportData() {
      const Headers = {
        '序号': 'id',
        '姓名': 'name',
        '手机号': 'mobile'
      }
      // 导出excel
      import('@/vendor/Export2Excel').then(excel => {
        // excel引入文件导出的对象
        excel.export_json_to_excel({
          multiHeader: [['', '38期通讯录', '']], // 复杂表头
          header: Object.keys(Headers), // 表头
          data: this.formatData(Headers), // 数据
          filename: '38期通讯录', // 文件名
          merges: ['B1:C1']// 合并单元格
        })
      })
    },
    // 导出的数据处理[['5', '潘璞老师', '13111111111']]
    formatData(Headers) {
      return this.list.map(item => {
        // {id: name:  mobile}
        return Object.keys(Headers).map(key => {
          // key 序号 姓名 手机号
          return item[Headers[key]]
        })
      })
    },
    //   预览处理函数
    preview(file) {
      // 这里应该弹出一个层 层里是点击的图片地址
      this.imgUrl = file.url
      this.showDialog = true
    },
    // 删除处理函数
    handleRemove(file, fileList) {
      //   file是点击删除的文件
      //   fileList是删除后的
      //   将原来的文件给排除掉了 剩下的就是最新的数组了
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    //   this.fileList = fileList
    },
    // 添加文件 上传成功 上传失败 都会执行
    changeFile(file, fileList) {
      // 如果action="#" 不正确 执行添加文件 上传失败 fileList[]
      // 如果action 正确  执行添加文件 上传成功 fileList[..]
      // 比upload的回调先执行
      this.fileList = fileList.map(item => item)
    //   this.fileList = fileList
    },
    // 上传前检查文件
    beforeUpload(file) {
      // 要开始做文件上传的检查了
      // 文件类型 文件大小
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false
      }
      //  检查大小
      const maxSize = 5 * 1024 * 1024
      if (maxSize < file.size) {
        this.$message.error('图片大小最大不能超过5M')
        return false
      }
      // 记录上传的当前文件id
      this.currentFileUid = file.uid
      //   显示进度条
      this.showPercent = true
      //   继续上传
      return true
    },
    // 上传文件
    // upload(params)
    upload({ file }) {
      if (file) {
        cos.putObject({
          Bucket: 'vita-wxl-1309172829', /* 填入您自己的存储桶，必须字段 */
          Region: 'ap-chengdu', /* 存储桶所在地域，例如ap-beijing，必须字段 */
          Key: file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
          StorageClass: 'STANDARD', // 上传类型 标准模式
          Body: file, // 上传文件对象
          // 进度条
          onProgress: (params) => {
            this.percent = params.percent * 100
          }
        }, (err, data) => {
          if (!err & data.statusCode === 200) {
            //   此时说明文件上传成功 要获取成功的返回地址
            // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址 目前虽然是一张图片但是请注意 我们的fileList是一个数组 需要知道当前上传成功的是哪一张图片
            this.fileList = this.fileList.map(item => {
              // 去找谁的uid等于刚刚记录下来的id
              if (item.uid === this.currentFileUid) {
                // 将成功的地址赋值给原来的url属性
                // 将资源弄成远程的地址而不是本地的资源
                return { url: `http://${data.Location}`, upload: true }
                // upload 为true 表示这张图片已经上传完毕 这个属性要为我们后期应用的时候做标记
                // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
              }
              return item
            })
            // 将上传成功的图片回写到fileList
            setTimeout(() => {
              this.showPercent = false // 隐藏进度条
              this.percent = 0 // 进度归0
            }, 300)
          }
        })
      }
    },
    // 分配权限
    permFn() {
      // 将数组转成树形
      this.permData = transListToTreeData(this.permlist, '0')
      // 展示弹层
      this.showPermDialog = true
    },
    // 点击取消或关闭弹层
    btnPermCancel() {
      // 隐藏弹层
      this.showPermDialog = false
    },
    // 点击确定
    async btnPermOK() {
      // 得到勾选数组
      this.selectCheck = await this.$refs.permTree.getCheckedKeys()
      console.log(this.selectCheck)
      // 关闭弹层
      this.showPermDialog = false
    },
    // 点击编辑执行处理函数
    editPermission(id) {
      // 数据回填
      this.permForm = this.permlist.find(item => item.id === id)
      // 展示弹层
      this.PermDialog = true
    },
    // 删除操作
    delPermission(id) {
      // 删除数据
      this.permlist = this.permlist.filter(item => item.id !== id)
      // 更新视图
      this.permListData = transListToTreeData(this.permlist, '0')
    },
    // 添加操作
    addPermission(pid, type) {
      // 这里是父级的id 也就是子级的pid
      this.permListDataPid = pid
      // 父级的type 子级比父级+1
      if (type) {
        this.permListDataType = type + 1
      }
      // 展示弹层
      this.PermDialog = true
    },
    // 添加编辑弹层确认
    async btnPermSubmit() {
      // 手动校验
      await this.$refs.permForm.validate()
      // 更新数据
      if (this.permForm.id) {
        // 有id 表示编辑
        this.permlist[this.permlist.findIndex(item => item.id === this.permForm.id)] =
         { ...this.permlist.find(item => item.id === this.permForm.id), ...this.permForm }
      } else {
        // 没有id表示新增
        this.permlist.push({ ...this.permForm, pid: this.permListDataPid, type: this.permListDataType, id: this.permForm.code })
      }
      // 更新视图
      this.permListData = transListToTreeData(this.permlist, '0')
      // 关闭弹层
      this.PermDialog = false
    },
    // 添加编辑弹层取消
    btnPermBack() {
      // 重置数据
      this.permForm = {
        code: '',
        description: '',
        id: '',
        name: '',
        pid: '',
        type: ''
      }
      // 重置校验
      this.$refs.permForm.resetFields()
      // 关闭弹层
      this.PermDialog = false
    },
    transFn() {
      // 遍历原数组
      this.datalist.forEach((obj, index) => {
        // 拿到每一个对象 和索引
        // 依次去给新数组 加name 和 value
        // value 是一个数组 是原数组属性值(除name)的集合
        // value获取:遍历原数组的每一个对象将属性放到一个数组中过滤不是name并返回对应属性值集合
        this.$set(this.translist, index, { name: obj.name,
          value: Object.keys(obj).filter(item => item !== 'name').map(k => obj[k]) })
      })
    }
  }
}
</script>

<style>
.el-table{
  text-align-last: center;
}
</style>
